<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-07-02 02:24:59
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-17 21:30:58
-->
<style>
    .calendar {
        background-color: #fff;
    }

    .calendar__header {
        padding: 12px 20px;
        /* border-bottom: 1px solid #ebeef5; */
    }

    .calendar__body {
        padding: 12px 20px 35px;
        background: var(--bg-gray);
        border-radius: 8px;
    }

    .calendar-table {
        table-layout: fixed;
        width: 100%;
        background: #fff;
    }

    .calendar-table thead th {
        padding: 12px 0;
        color: #606266;
        font-weight: 400;
    }

    .calendar-table:not(.is-range) td.next,
    .calendar-table:not(.is-range) td.prev {
        color: #c0c4cc;
    }

    .calendar-table tr th:first-child,
    .calendar-table tr td:first-child {
        border-left: 1px solid #ebeef5;
    }

    .calendar-table tr:first-child th,
    .calendar-table tr:first-child td {
        border-top: 1px solid #ebeef5;
    }

    .calendar-table th,
    .calendar-table td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        vertical-align: top;
        transition: background-color .2s ease;
    }

    .calendar-table .calendar-day {
        box-sizing: border-box;
        height: 85px;
        position: relative;
        line-height: 85px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .calendar-table td.today {
        color: var(--primary-color);
    }

    .disabled {
        background-color: #f5f7fa;
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .work:after {
        content: " ";
        position: absolute;
        left: 50%;
        bottom: 20px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
    }

    .user-add .layui-input,
    .user-add .layui-select,
    .user-add .layui-textarea {
        height: 32px;
    }

    .user-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 8px;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        color: #000;
        font-size: 14px;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        font-size: 12px;
    }

    .user-item.selected {
        background: var(--primary-hover-color);
        border: 1px solid var(--primary-color);
    }

    .user-left {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .layui-date {
        width: 100px;
        text-align: center;
    }



    #user-list {
        height: calc(100vh - 480px);
    }
</style>
<div class="layuimini-main user-add">
    <div class="section">
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="px-4 pt-4">
                    <form class="layui-form layui-row layui-col-space16 ">
                        <div class="layui-col-sm4">
                            <input type="text" name="A" placeholder="请输入" class="layui-input">
                        </div>
                        <div class="layui-col-sm4">
                            <select class="layui-input" lay-append-to="body" placeholder="全部供应商" name="supplierCodes"
                                lay-search>
                                <option value="1">行政</option>
                                <option value="2">客户服务部负责人</option>
                            </select>
                        </div>
                        <div class="layui-col-sm4">
                            <select class="layui-input" lay-append-to="body" placeholder="全部岗位" name="supplierCodes"
                                lay-search>
                                <option value="1">行政</option>
                                <option value="2">客户服务部负责人</option>
                            </select>
                        </div>
                        <div class="layui-col-sm4">
                            <select class="layui-input" lay-append-to="body" placeholder="全部网格" name="supplierCodes"
                                lay-search>
                                <option value="1">行政</option>
                                <option value="2">客户服务部负责人</option>
                            </select>
                        </div>

                        <div class="layui-col-sm4">

                            <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                                lay-filter="data-search-btn">查询</button>
                            <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                        </div>

                    </form>
                </div>
                <div class="p-4 layui-font-12">
                    <div class="flex-between w100">
                        <div class="font-weight t-l">人员/岗位/职位/网格</div>
                        <div class="font-weight t-r">已排/可休</div>
                    </div>
                </div>
                <hr class="m-0" />
                <!-- 列表区域 -->
                <div class="y-scroll m-4" id="user-list">

                </div>

            </div>
            <div class="layui-col-md8">
                <div class="calendar">
                    <div class="calendar__header">
                        <div class="flex-center w100">
                            <button class="layui-btn layui-btn-primary layui-btn-sm  mr-3" id="prev-month" title="上个月">
                                <i class="layui-icon layui-icon-left"></i>
                            </button>
                            <input class="layui-input layui-date mr-3" type="text" id="current_month"
                                placeholder="选择日期">
                            <button class="layui-btn layui-btn-primary layui-btn-sm mr-3" id="next-month" title="下个月">
                                <i class="layui-icon layui-icon-right"></i>
                            </button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm mr-3" id="today" title="返回今天">
                                <i class="layui-icon layui-icon-refresh"></i>
                            </button>
                        </div>




                    </div>
                    <div class="calendar__body">
                        <div class="t-r">单击具体日期即可安排/取消月休</div>
                        <table cellspacing="0" cellpadding="0" class="calendar-table" id="calendar-table">
                            <thead>
                                <th>周一</th>
                                <th>周二</th>
                                <th>周三</th>
                                <th>周四</th>
                                <th>周五</th>
                                <th>周六</th>
                                <th>周日</th>
                            </thead>
                            <tbody>
                                <!-- 日历内容自动填充 -->

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'miniDate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            table = layui.table,
            util = layui.util,
            $ = layui.$,
            miniDate = layui.miniDate;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        $.getJSON("api/userList.json", function (json) {
            console.log('json==', json)
            if (json.code === 0) {
                renderGridCheck(json.data.list);
            } else {
                console.error("数据加载失败:", json.msg);
            }
        });


        function renderGridCheck(data) {
            const container = $('#user-list');
            container.empty(); // 清空旧元素
            data.forEach(item => {
                const checkboxId = `grid_${item.userId}`;
                const checkboxHtml = `

                <div class="user-item" id="${checkboxId}">
                                <span class="user-left">${item.nickname}
                                    <span class="layui-font-gray">${item.departmentName}</span>
                                    </span>
                                <span>0/12</span>
                            </div>

                            
                `;
                container.append(checkboxHtml);
                // 绑定点击事件
                $(`#${checkboxId}`).on('click', function () {
                    $(this).toggleClass('selected');
                    const isSelected = $(this).hasClass('selected');
                    if (isSelected) {

                        console.log('isSelected===选中')
                    } else {
                    }
                    // 单选模式：只保留当前选中项
                    if (!$(this).hasClass('multi-select')) {
                        $(`.user-item`).not(this).removeClass('selected');

                    }
                });
            });
        }




        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        // 获取存储的数据
        var appData = layui.sessionData('SHIFT_PARAMS')
        let { dataDto = null, pageType = '' } = appData
        if (dataDto) {
            dataDto = JSON.parse(dataDto)
        }
        console.log('子页面的值===', pageType, dataDto)

        // 普通事件
        util.on('lay-on', {
            // 关闭弹出层
            "closeBtn": function () {
                layer.close(parentIndex);

            }
        });




        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });






        /******************** 遍历日历 start ********************/

        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');// 月份从 0 开始 补零



        let todayDateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;

        // 获取某月的所有日期数据（含星期信息）
        function getCalendarData(year, month) {
            const range = miniDate.getMonthRange(year, month);
            return miniDate.getDateWithWeekArray(range.start, range.end);
        }

        function renderCalendar(year, month) {
            month = String(month).padStart(2, '0');
            const daysOfWeek = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
            const dateList = getCalendarData(year, month);
            $('#current_month').val(`${year}-${month}`);

            let tbody = document.querySelector('#calendar-table tbody');
            tbody.innerHTML = '';

            let row = document.createElement('tr');

            const firstDay = dateList[0];
            let startDayIndex = daysOfWeek.indexOf(firstDay.weekDay);

            // 插入月初空白
            if (startDayIndex !== 0) {
                for (let i = 0; i < startDayIndex; i++) {
                    let td = document.createElement('td');
                    td.className = 'prev';
                    td.innerHTML = '<div class="calendar-day"></div>';
                    row.appendChild(td);
                }
            }

            // 插入每一天
            dateList.forEach((day, index) => {
                let td = document.createElement('td');
                td.className = day.isToday ? 'current today' : 'current';

                td.innerHTML = `
            <div class="calendar-day work">
                <div data-date=${day.date}>${day.day}</div>
                
            </div>
        `;

                row.appendChild(td);

                // 判断是否换行：当前是周日 或 最后一项
                const currentDay = new Date(day.fullDate).getDay();
                if (currentDay === 0 || index === dateList.length - 1) {
                    console.error('row====', row)
                    tbody.appendChild(row);
                    row = document.createElement('tr');
                }
            });



            // 补齐月末空白
            const lastDay = dateList[dateList.length - 1];
            let endDayIndex = daysOfWeek.indexOf(lastDay.weekDay);

            // 获取 tbody 最后一行
            const tbodyRow = document.querySelector('#calendar-table tbody');
            let lastRow = tbodyRow.rows[tbodyRow.rows.length - 1];

            if (endDayIndex !== 6) {
                for (let i = endDayIndex + 1; i <= 6; i++) {
                    let td = document.createElement('td');
                    td.className = 'next';
                    td.innerHTML = '<div class="calendar-day"></div>';
                    lastRow.appendChild(td); // 追加到已有最后一行
                }
            }


        }
        // 切换上个月
        document.getElementById('prev-month').addEventListener('click', function () {
            currentMonth--;
            if (currentMonth < 1) {
                currentMonth = 12;
                currentYear--;
            }
            renderCalendar(currentYear, currentMonth);
        });

        // 切换下个月
        document.getElementById('next-month').addEventListener('click', function () {
            currentMonth++;
            if (currentMonth > 12) {
                currentMonth = 1;
                currentYear++;
            }
            renderCalendar(currentYear, currentMonth);
        });

        // 返回今天
        document.getElementById('today').addEventListener('click', function () {
            currentYear = new Date().getFullYear();
            currentMonth = today.getMonth() + 1;



            renderCalendar(currentYear, currentMonth);
        });
        //日期组件
        laydate.render({
            elem: '#current_month',
            type: 'month',
            done: function (value, date, endDate) {
                const { year, month } = date
                currentYear = year
                currentMonth = month
                renderCalendar(year, month);
            }
        });

        $('body').on('click', '.calendar-day', function () {
            layer.alert('点击单个日历');
        });
        // 初始化渲染
        renderCalendar(currentYear, currentMonth);
        /******************** 遍历日历 end ********************/

    });
</script>